@charset "utf-8";
body {
    background: url(../img/背景8.jpg) repeat;
	background-size: 100% 732px;
    overflow: hidden;
}
.scene {
    position: relative;
    width: 30%;
    height: 400px;

	
}
.xiaozhi{
	width: 250px;
	position: relative;
	bottom: 269px;
	left: 1000px;
}
.scene p {
    position: relative;
    top: -504px;
    left: 603px;
    color: white;
    font-size: 48px;
    font-weight: bold;
}
.pokeball {
    width: 60px; 
    position: relative; 
	bottom: -10px;
	left: 687px;
    animation: throw-and-fail 5s forwards;
}


.pokemon-sprite {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/penhuolong.png);  
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: capture-and-evolve 5s forwards;
}


@keyframes throw-and-fail {
    0%   { transform: translateX(0) 
			rotate(0deg); 
	}
    30%  { 
		transform: translateX(-550px) rotate(720deg); }
    40%  {
		transform: translateX(-550px) rotate(710deg) translateX(-10px); }
    50%  { 
		transform: translateX(-550px) rotate(730deg) translateX(10px); }
    60%  { 
		transform: translateX(-550px) rotate(710deg) translateX(-10px); }
    65%  { 
		transform: translateX(-550px) rotate(730deg) translateX(10px); }
    70%  { 
		transform: translateY(-550px) rotate(900deg); }
    100% { 
		transform: translateY(-500px) rotate(1080deg); }
}
@keyframes capture-and-evolve {
    0%   { 
		opacity: 1; transform: scale(1); 
		filter: brightness(1); 
		}
    29%  { 
		opacity: 1; transform: scale(1); 
		filter: brightness(1); 
		}
    30%  { 
		opacity: 0; transform: scale(0.5); }
    60%  { 
		opacity: 0; transform: scale(0.5); }
    70%  { 
		opacity: 1; transform: scale(1); 
		filter: brightness(1); 
		}
    75%  { 
		transform: scale(1.2) rotate(5deg); 
		filter: brightness(3) drop-shadow(0 0 15px white); 
		}
    80%  { 
		transform: scale(1.1) rotate(-5deg); 
		filter: brightness(3) drop-shadow(0 0 15px white); 
		}
    85% {
        background-image: url(../img/penhuolong.png);
        opacity: 1;
        transform: scale(1.2); 
        filter: brightness(1.5); 
    }
    100% {
        background-image: url(../img/megax.png); 
        opacity: 1; 
        transform: scale(1);
        filter: brightness(1);
    }
}